<template>
	<div class="review-content">
		<div class="head">
			<span class="title">
				{{
					$t(
						'funds.fund_audit.member_withdrawal_subAudit_detail_title'
					)
				}}
			</span>
			<div v-if="type" class="right-btn">
				<el-button plain @click="goBack">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button
					v-if="hasPermission('90060026')"
					type="success"
					@click="confirm(true)"
				>
					{{
						activeName === '1'
							? $t('funds.fund_audit.audit_success_1')
							: $t('funds.fund_audit.audit_success_2')
					}}
				</el-button>
				<el-button
					v-if="hasPermission('90060026')"
					type="danger"
					@click="confirm(false)"
				>
					{{
						activeName === '1'
							? $t('funds.fund_audit.audit_fail_1')
							: $t('funds.fund_audit.audit_fail_2')
					}}
				</el-button>
			</div>
			<div v-else class="right-btn">
				<el-button plain @click="goBack">
					{{ $t('common.back') }}
				</el-button>
			</div>
		</div>
		<div class="main-content detailBoxStyle">
			<div class="review-content">
				<p class="name">
					{{ $t('funds.fund_audit.title_2') }}
				</p>
				<div class="review-flex">
					<el-table
						border
						size="mini"
						:data="[1]"
						style="width: 100%"
						:header-cell-style="getRowClass"
					>
						<el-table-column
							align="center"
							:label="$t('funds.user_name')"
							min-width="160"
						>
							<template>
								{{ (list && list.userName) || '-' }}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('funds.fund_audit.belong_proxy')"
							min-width="160"
						>
							<template>
								{{ list.parentProxyName || '-' }}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('common.belong_merchant')"
							min-width="160"
						>
							<template>
								<span>
									{{
										list.merchantId
											? merchantFilter(list.merchantId)
											: list.merchantName || '-'
									}}
								</span>
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('common.account_status')"
							min-width="100"
						>
							<template>
								<span
									v-if="list.loginLockStatus === 1"
									class="disableRgba"
								>
									{{ $t('common.login_lock_status') }}
								</span>
								<span
									v-if="list.gameLockStatus === 1"
									class="lockingRgba"
								>
									{{ $t('common.game_lock_status') }}
								</span>
								<span
									v-if="list.paymentLockStatus === 1"
									class="deleteRgba"
								>
									{{ $t('common.account_lock_status') }}
								</span>
								<span
									v-if="
										list.loginLockStatus === 0 &&
											list.gameLockStatus === 0 &&
											list.paymentLockStatus === 0
									"
									class="normalRgba"
								>
									{{ $t('common.account_status_normal') }}
								</span>
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('report.register_date')"
							min-width="130"
						>
							<template>
								{{ list.createdAt || '-' }}
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
			<div class="review-content">
				<p class="name">
					{{
						$t(
							'funds.fund_audit.outstanding_loan_settlement_bill_title'
						)
					}}
				</p>
				<div class="review-flex">
					<el-table
						border
						size="mini"
						:data="[1]"
						style="width: 100%"
						:header-cell-style="getRowClass"
					>
						<el-table-column
							align="center"
							:label="$t('funds.fund_audit.snapshot_time')"
						>
							<template>
								{{ list.loanBillSnapshotTime || '-' }}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="
								$t(
									'funds.settlement_bill_management.bill_net_assets'
								)
							"
						>
							<template>
								{{ handleCurrency(list.currency) }}
								{{ handleNumber(list.currency, list.asset) }}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="
								$t(
									'funds.settlement_bill_management.payable_bill_loan'
								)
							"
						>
							<template>
								{{ handleCurrency(list.currency) }}
								{{
									handleNumber(
										list.currency,
										list.shouldRepay
									)
								}}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="
								$t(
									'funds.settlement_bill_management.withdrawable_limit'
								)
							"
						>
							<template>
								{{ handleCurrency(list.currency) }}
								{{
									handleNumber(
										list.currency,
										list.withdrawAvailable
									)
								}}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('report.center_wallet_balance')"
						>
							<template>
								{{ handleCurrency(list.currency) }}
								{{
									handleNumber(
										list.currency,
										list.cashAvailable
									)
								}}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="
								$t(
									'funds.settlement_bill_management.credit_wallet_balance'
								)
							"
						>
							<template>
								{{ handleCurrency(list.currency) }}
								{{
									handleNumber(
										list.currency,
										list.creditAvailable
									)
								}}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('funds.fund_audit.credit_limit')"
						>
							<template>
								{{ handleCurrency(list.currency) }}
								{{
									handleNumber(
										list.currency,
										list.creditTotal
									)
								}}
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
			<div class="review-content">
				<p class="name">
					{{ $t('funds.fund_audit.history_loan_settlement_bill') }}
				</p>

				<div class="review-flex">
					<el-table
						border
						size="mini"
						:data="[1]"
						style="width: 100%"
						:header-cell-style="getRowClass"
					>
						<el-table-column
							align="center"
							:label="$t('funds.fund_audit.bill_date')"
						>
							<template>
								{{ list.historyBillPeriod || '-' }}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('funds.fund_audit.generation_time')"
						>
							<template>
								{{ list.generatedTime || '-' }}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="
								$t(
									'funds.settlement_bill_management.bill_net_assets'
								)
							"
						>
							<template>
								{{ handleCurrency(list.currency) }}
								{{
									handleNumber(
										list.currency,
										list.historyAsset
									)
								}}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="
								$t(
									'funds.settlement_bill_management.payable_bill_loan'
								)
							"
						>
							<template>
								{{ handleCurrency(list.currency) }}
								{{
									handleNumber(
										list.currency,
										list.historyShouldRepay
									)
								}}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="
								$t(
									'funds.settlement_bill_management.withdrawable_limit'
								)
							"
						>
							<template>
								{{ handleCurrency(list.currency) }}
								{{
									handleNumber(
										list.currency,
										list.historyWithdrawAvailable
									)
								}}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('report.center_wallet_balance')"
						>
							<template>
								{{ handleCurrency(list.currency) }}
								{{
									handleNumber(
										list.currency,
										list.historyCashAvailable
									)
								}}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="
								$t(
									'funds.settlement_bill_management.credit_wallet_balance'
								)
							"
						>
							<template>
								{{ handleCurrency(list.currency) }}
								{{
									handleNumber(
										list.currency,
										list.historyCreditAvailable
									)
								}}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('funds.fund_audit.credit_limit')"
						>
							<template>
								{{ handleCurrency(list.currency) }}
								{{
									handleNumber(
										list.currency,
										list.historyCreditTotal
									)
								}}
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
			<div class="review-content">
				<p class="name">
					{{
						$t(
							'funds.fund_audit.member_topup_review_detail_title_4'
						)
					}}
				</p>

				<div class="review-flex">
					<el-table
						border
						size="mini"
						:data="[1]"
						style="width: 100%"
						:header-cell-style="getRowClass"
					>
						<el-table-column
							align="center"
							:label="$t('funds.fund_audit.operator')"
						>
							<template>
								{{ list.applyUserName || '-' }}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('funds.apply_time')"
						>
							<template>
								{{ list.eventTime || '-' }}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('funds.user_name')"
						>
							<template>
								{{ list.userName || '-' }}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('funds.fund_audit.adjust_type')"
						>
							<template>
								{{ list.adjustTypeStr || '-' }}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('funds.fund_audit.order_amount')"
						>
							<template>
								<el-link type="danger" :underline="false">
									{{ handleCurrency(list.currency) }}
									{{
										handleNumber(
											list.currency,
											list.orderAmount
										)
									}}
								</el-link>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
			<div class="review-content" v-if="list && list.audit1Operator">
				<p class="name">{{ $t('funds.fund_audit.audit_info') }}</p>
				<div class="review-flex">
					<div>
						{{ $t('funds.fund_audit.audit_user_1') }}:
						{{ list.audit1Operator || '-' }}
					</div>
					<div>
						{{ $t('funds.fund_audit.audit_time_1') }}:
						{{ list.audit1Time || '-' }}
					</div>
					<div>
						{{ $t('funds.fund_audit.audit_remark_1') }}:
						<span class="txtfeed world_break">
							{{ list.audit1Desc || '-' }}
						</span>
					</div>
				</div>
				<div v-if="list && list.audit2Operator" class="review-flex">
					<div>
						{{ $t('funds.fund_audit.audit_user_2') }}:
						{{ (list && list.audit2Operator) || '-' }}
					</div>
					<div>
						{{ $t('funds.fund_audit.audit_time_2') }}:
						{{ (list && list.audit2Time) || '-' }}
					</div>
					<div>
						{{ $t('funds.fund_audit.audit_remark_2') }}:
						<span class="txtfeed world_break">
							{{ (list && list.audit2Desc) || '-' }}
						</span>
					</div>
				</div>
			</div>
		</div>
		<el-dialog
			:title="$t('funds.fund_audit.picture')"
			:visible.sync="imgVisible"
			:destroy-on-close="true"
			class="imgCenter"
		>
			<div class="img-box">
				<img v-lazy="bigImage" />
			</div>
		</el-dialog>
		<el-dialog
			:title="$t('funds.fund_audit.audit_dialog_title')"
			center
			:visible.sync="visible"
			:before-close="closeFormDialog"
			width="580px"
			class="audit-confirm"
		>
			<el-form
				ref="form"
				:model="form"
				:rules="formRules"
				label-width="auto"
			>
				<el-form-item
					:label="$t('common.components.remark')"
					prop="remark"
				>
					<el-input
						v-model="form.remark"
						clearable
						type="textarea"
						:maxlength="500"
						show-word-limit
						:autosize="{ minRows: 4, maxRows: 4 }"
						style="width: 380px"
						v-input="{ name: 'noEmpty' }"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="closeFormDialog">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button type="primary" @click="openSeaMoonDialog(true)">
					{{ $t('common.submit') }}
				</el-button>
			</div>
		</el-dialog>
		<SeaMoonDialog
			:sea-moon-visible.sync="seaMoon.visible"
			:params="seaMoon.params"
			@success="onSeaMoonValidSucceed"
		></SeaMoonDialog>
	</div>
</template>

<script>
import list from '@/mixins/list'
import SeaMoonDialog from '@/components/SeaMoon'

export default {
	components: {
		SeaMoonDialog
	},
	mixins: [list],
	props: {
		// 审核 true 仅返回 false
		type: Boolean,
		activeName: {
			type: String,
			default: ''
		},
		rowData: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		this.auditOne = this.throttle(this.auditOne, 1000)
		return {
			list: {},
			form: {
				remark: ''
			},
			visible: false,
			action: false,
			imgVisible: false,
			bigImage: '',
			seaMoon: {
				isAudit: false,
				visible: false,
				params: {}
			}
		}
	},
	computed: {
		formRules() {
			return {
				remark: [
					{
						required: true,
						message: this.$t('funds.fund_audit.form_rules_tip2'),
						trigger: 'blur'
					},
					{
						min: 2,
						max: 500,
						message: this.$t('funds.fund_audit.form_rules_tip2'),
						trigger: 'blur'
					}
				]
			}
		}
	},
	created() {
		this.getInfo()
	},
	methods: {
		onSeaMoonValidSucceed(data) {
			if (this.seaMoon.isAudit) {
				this.auditOne()
			}
		},
		openSeaMoonDialog(isAudit) {
			this.$refs.form.validate((valid) => {
				if (valid) {
					this.auditOne()
				}
			})
		},
		closeFormDialog() {
			this.visible = false
			this.form.remark = undefined
		},
		confirm(action) {
			this.remark = ''
			this.action = action
			this.visible = true
			this.$refs.form && this.$refs.form.clearValidate()
		},
		auditOne() {
			/**
			 * 审核结果 - auditResult (1=通过 2=拒绝)
			 * eventId(18) - 订单号
			 * 订单状态 - auditType (1=待一审,2=一审审核,3=待二审,4=二审审核,5=一审拒绝,6=二审拒绝,7=审核通过)
			 * 备注 - auditDesc
			 */
			const params = {
				eventId: this.rowData.eventId,
				auditDesc: this.form.remark,
				auditResult: this.action ? 1 : 2,
				auditType: this.activeName
			}
			const loading = this.$loading({
				lock: true,
				text: 'Loading',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			})
			this.$api
				.memberWithDrawUserupdateWithdraw(params)
				.then((res) => {
					loading.close()
					if (res?.code === 200) {
						this.$message({
							type: 'success',
							message: this.$t('common.action_success')
						})
						this.visible = false
						this.$emit('goBack', true)
					} else {
						this.$message({
							message: res?.msg,
							type: 'error'
						})
					}
				})
				.catch(() => {
					loading.close()
				})
		},
		goBack() {
			this.$emit('goBack')
		},
		lookGame(val) {
			this.imgVisible = true
			this.bigImage = val
		},
		getInfo() {
			/**
			 * id(18) - id
			 * 商户ID(18) - merchantId
			 */
			const params = {
				id: this.rowData.id,
				eventId: this.rowData.eventId,
				merchantId: this.rowData.merchantId
			}
			this.$api.selectMemberWithdrawUser(params).then((res) => {
				if (res?.code === 200) {
					this.loading = false
					this.list = res.data || {}
				} else {
					this.loading = false
					this.$message({
						message: res?.msg,
						type: 'error'
					})
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
.audit-confirm {
	text-align: left;
}
.review-content {
	margin: 24px 16px 20px 16px;
	color: #666666;
	.review-table {
		width: 100%;
		text-align: center; /*文本居中*/
		border-collapse: collapse; /*表格的边框合并，如果相邻，则共用一个边框*/
		border-spacing: 0;
		border: 1px solid rgba(238, 230, 230, 0.562);
		td {
			border-right: 1px solid rgba(238, 230, 230, 0.562);
			border-bottom: 1px solid rgba(228, 220, 220, 0.562);
			height: 36px;
			font-size: 12px;
			line-height: 36px;
			width: 13%;
		}
		.td-title {
			width: 7%;
			background: rgb(239, 239, 239);
		}
	}
	.head {
		height: 70px;
		line-height: 70px;
		width: 100%;
		background: #000;
		border-radius: 2px;
		padding: 0 30px;
		.title {
			font-weight: 600;
			color: rgb(192, 190, 190);
		}
		.right-btn {
			float: right;
		}
	}
	.main-content {
		.review-content {
			min-height: 150px;
			border-top: 0;
			padding: 30px;
			.name {
				font-weight: 600;
			}
			.review-flex {
				position: relative;
				width: 100%;
				margin-top: 15px;
				div {
					display: inline-block;
					width: 24%;
				}
			}
		}
		.more-height {
			height: 200px;
		}
	}
	::v-deep .el-form-item__error {
		left: 0;
	}
	.reason {
		word-break: break-all;
	}
}
</style>
